<template>
	<view class="out-box">
		<view class="success" v-if="user.payState == 1">
			<!-- <image class="success_img" src="../../static/images/成功.png"></image>
			<view class="success_center">支付成功</view>
			<view class="success_look" @tap="towxxcx('支付成功')">去小程序查看发布状态</view>
			<view class="success_look" @tap="service()">联系客服</view> -->
			<view class="success_hader">
				<view class="hader_text"> 
					<view class="hader_icon"></view>
					<view class="hader_text1">支付成功</view>
				</view>
				<view class="hader_text2">预计 2分钟之内发布成功，可前往首页查看发布情况或去微信小程序管理店铺及查看发布情况</view>
			</view>
			<!-- 下方的列表 -->
			<view class="list">
				<view class="kf_kp_title">
					<view class="block"></view>
					<view class="title_text">店铺发布成功</view>
				</view>
				<!-- 这个是列表 -->
				<view class="main_lists_item" v-if="oder_value.result.shopType == 1&& oder_value.result.shopInfo">
					<view class="Topping" v-if="oder_value.result.shopInfo.is_top == 1">置顶</view>
					<view class="item_left">
						<image class="item_left_img" :src=oder_value.result.shopInfo.cover_img></image>
						<view class="visits">
							<view class="visits_img"></view>
							<view class="visits_num">{{ oder_value.result.shopInfo.exposure_count }}</view>
						</view>
					</view>
					<view class="item_right">
						<view class="item_right_one"><span v-if="oder_value.result.shopInfo.is_swerve == 1" class="isspan">（急转）</span>{{oder_value.result.shopInfo.title}}</view>
						<view class="item_right_two_big">
							<view class="item_right_two">{{oder_value.result.shopInfo.city + '-'+oder_value.result.shopInfo.county}}</view>
							<view class="three_are">{{  oder_value.result.shopInfo.shop_area+"m²"}}</view>
						</view>
						<view v-if="oder_value.result.shopInfo.feature_label" class="item_right_identifying">
							<view  class="item_right_identifying_item" v-for="item1,index1 in oder_value.result.shopInfo.feature_label.split(',')" :key="index1">
								<view>{{ item1}}</view>
							</view>
						</view>
						<view class="item_right_three">
							<view class="three_money">{{ (oder_value.result.shopInfo.rent == '' || oder_value.result.shopInfo.rent == null ||oder_value.result.shopInfo.rent == '面议' || oder_value.result.shopInfo.rent =='null') ? '面议': oder_value.result.shopInfo.rent + '元' }}<span class="span1" v-if="oder_value.result.shopInfo.rent !=null">/月</span></view>
							<view class="three_time">{{oder_value.result.shopInfo.update_time != null ? oder_value.result.shopInfo.update_time : oder_value.result.shopInfo.create_time}}</view>
						</view>
					</view>
				</view>

				<!-- 求租 -->
				<view class="lists_item" v-if="oder_value.result.shopType == 2">
						<!-- 最上方置顶 -->
						<view class="Toppingtwo" v-if="oder_value.result.shopInfo.is_top == 1">置顶</view>
						<view class="item_left">
							<view class="item_left_one"><span v-if="oder_value.result.shopInfo.is_swerve == 1" class="isspan">(急租)</span>{{ oder_value.result.shopInfo.title }}</view>
							<view  class="item_right_identifying" v-if="oder_value.result.shopInfo.feature_label != null && oder_value.result.shopInfo.feature_label != ''">
								<view class="item_right_identifying_item" v-for="item1,index in oder_value.result.shopInfo.feature_label.split(',')" :key="index">
									<view >{{ item1}}</view>
								</view>
							</view>
							<view class="item_left_two">联系人：{{oder_value.result.shopInfo.name }}</view>
							<view class="item_right_three">
								<view class="three_ipone">联系电话：{{oder_value.result.shopInfo.phone}}</view>
								<view class="three_time">更新于:{{ oder_value.result.shopInfo.top_time}}</view>
							</view>
							<!-- <view class="hrone"></view> -->
						</view>
					</view>
				<view class="buttom">
					<view class="buttomone" @tap="toindex">查看发布情况</view>
					<view class="buttomtwo" @tap="towxxcx('支付成功')">完善资料 加速转店</view>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="oder_infrter">
				<view class="kf_kp_title">
					<view class="block"></view>
					<view class="title_text">订单信息</view>
				</view>
				<view class="center_list">
					<view class="center_left">购买套餐:</view>
					<view class="center_right">{{ oder_value.result.payNote }}</view>
				</view>
				<view class="center_list">
					<view class="center_left">订单金额:</view>
					<view class="center_right">{{'￥' + (oder_value.result.totalFee/100).toFixed(2) }}</view>
				</view>
				<view class="center_list">
					<view class="center_left">实付款:</view>
					<view class="center_right" style="color:rgba(255, 87, 51, 1);">{{'￥' + (oder_value.result.totalFee/100).toFixed(2) }}</view>
				</view>
				<view class="hr"></view>
				<view class="center_list">
					<view class="center_left">订单编号：</view>
					<view class="center_right" @tap="copyText">{{ oder_value.result.orderNum + ' | 复制' }}</view>
				</view>
				<view class="center_list">
					<view class="center_left">下单时间：</view>
					<view class="center_right">{{ oder_value.result.createTime }}</view>
				</view>
				<view class="center_list">
					<view class="center_left">支付方式：</view>
					<view class="center_right">{{ oder_value.result.payType =="WX_H5"?'微信支付':'支付宝支付'}}</view>
				</view>
				<!-- 对订单有疑问联系客服 -->
				<view class="callkf" @tap="service()">
					对订单有疑问   联系客服
				</view>
			</view>

		</view>
		<view class="fail" v-if="user.payState == 0">
			<view class="fail_hader">
				<view class="hader_text"> 
					<view class="hader_icon"></view>
					<view class="hader_text1">支付失败</view>
				</view>
				<image src="../../static/images/支付失败.png" class="hader_image"></image>
			</view>
			<view class="fail_center">
				<view class="center_title">支付遇到问题，请尝试重新支付</view>
				<view class="center_list">
					<view class="center_left">订单编号：</view>
					<view class="center_right" @tap="copyText">{{ oder_value.result.orderNum + ' | 复制' }}</view>
				</view>
				<view class="center_list">
					<view class="center_left">下单时间：</view>
					<view class="center_right">{{ oder_value.result.createTime }}</view>
				</view>
				<view class="center_list">
					<view class="center_left">支付方式：</view>
					<view class="center_right">{{ oder_value.result.payType =="WX_H5"?'微信支付':'支付宝支付'}}</view>
				</view>
				<view class="center_list">
					<view class="center_left">购买套餐:</view>
					<view class="center_right">{{ oder_value.result.payNote }}</view>
				</view>
				<view class="center_list">
					<view class="center_left">订单金额:</view>
					<view class="center_right">{{'￥' + (oder_value.result.totalFee/100).toFixed(2) }}</view>
				</view>
				<view class="cxzf" @tap="topay()">重新支付</view>
				<view class="wyzf" @tap="Refresh()">我已支付，点击刷新订单</view>
			</view>
			<!-- 联系客服 -->
			<view class="kf_kp">
				<view class="kf_kp_title">
					<view class="block"></view>
					<view class="title_text">遇到问题不要急哟，联系客服为您解决</view>
				</view>
				<view class="kf_kp_list">
					<view class="qr" @tap="towxxcx('支付失败')">确认已发布</view>
					<view class="wx" @tap="service()">微信在线客服</view>
					<view class="wx" @tap="call_phone()">电话咨询</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {onGotApiData,addClick} from '../../util/api.js'
import {ref,reactive,onBeforeMount,onMounted} from 'vue'

	// 从上个页面获取到参数
	const props = defineProps({
		orderNum: String,
		});
	const orderNum = props.orderNum

// 在组件渲染之前执行
onBeforeMount(() => {
	console.log('组件准备渲染');
		// 请求20次，间隔3秒
		get_oder()
		// 设置定时器，5s执行一次
		timer.value = setInterval(() => {
			// 如果3次都失败啦，直接清空定时器
			// 0,1,2
			if (requestNum >= 20) {
				clearInterval(timer.value);
				return;
			}
			get_oder()
			requestNum++;
		}, 3000);
	
	user.link = uni.getStorageSync('link');
})

// 在组件渲染完成后执行
onMounted(() => {
	console.log('组件已经渲染完毕');
});
// 本页面的数据
let user = reactive({
	orderNum:'',
	payState:3,
	payUrl:'',
	link:''
})
// 定时器相关变量
// 请求5次，间隔1秒
let requestNum = reactive(1)
let timer = ref(null)

const link = uni.getStorageSync('link') || ''
// 跳转到首页
const toindex = () =>{
	const channelNo = uni.getStorageSync('channel_no')
	if(oder_value.result.link){
		console.log('oder_value.result.link',oder_value.result.link)
		window.location.href = oder_value.result.link
	}else{	
		uni.redirectTo({
			url: '/pages/index/index?channelNo=' + channelNo
		});
	}
}

// 跳转到小程序
const towxxcx = (str) =>{
	addClick(str,'去小程序')
	towx()
}
// 跳转到小程序
const towx = () =>{
	let params = reactive({
		link :  oder_value.result.link == null ? link : oder_value.result.link,
		env_version: 'release'
	})
	console.log("params",params)
	onGotApiData('/api/app/xcx/jump_xcx','GET',params,towx_value)
}
// 返回的结果
const towx_value =(result) =>{
	window.location.href = result.openlink
}

// 我已经支付
const Refresh = () =>{
		get_oder()
}

// 拨打客服电话
const call_phone = () =>{
	uni.makePhoneCall({
		phoneNumber: '052781985991',
	});
}
// 点击联系客服
const service = () =>{
	addClick('h5支付失败','联系客服')
	window.location.href = 'https://work.weixin.qq.com/kfid/kfca18ef986926eda85'
}

// 点击重新支付
const topay = () =>{
	addClick('h5支付失败','重新支付')
	window.location.href = oder_value.result.payUrl
}
// 查询订单
let oder_value = reactive({
	result:{},
})
const get_oder = () =>{
		let params = reactive({
			order_num : orderNum
		})
		console.log("params",params)
		onGotApiData('/api/app/order/get_order','GET',params,oeder_value)
	}
	// 查询支付结果
	const oeder_value = (result) => {
		console.log("订单结果查询",result)
		oder_value.result = result
		if(result.payState == 1){
			user.payState = 1
			clearInterval(timer.value);
			console.log("我打印的是什么",user.payState)
			return
			// 返回失败的结果
		}else{
			user.payState = 0
		}
	}
	// 复制功能
	const copyText = ()=>{
		uni.setClipboardData({
			data: oder_value.result.orderNum,
			success() {
				uni.showToast({
					title: '复制成功',
					icon: 'success'
				});
			},
			fail() {
				uni.showToast({
					title: '复制失败',
					icon: 'none'
				});
			}
		});
	}
</script>

<style lang="scss" scoped>
	.out-box {
		min-height: 100vh;
		width: 100vw;
		max-width: 750rpx;
		margin: 0 auto;
		overflow: hidden;
		background-color: rgb(236, 234, 234);
		width: 750rpx auto;
		font-family: '思源黑体';
		font-weight: 600;
		.success{
			width: 750rpx;
			margin: 0 auto;
			padding-bottom: 20rpx;
			// border: 1px solid black;	
			font-family: '思源黑体';
			background-color: rgba(229, 229, 229, 1);
			.success_hader{
				width: 750rpx;
				height: 400rpx;
				background: linear-gradient(180deg, rgba(252, 68, 68, 1) 0%, rgba(252, 169, 169, 1) 100%);
				overflow: hidden;
				.hader_text{
					width: 250rpx;
					height: 80rpx;
					// border: 1px solid black;
					margin:  0 auto;
					margin-top: 80rpx;
					display: flex;
					.hader_icon{
						width: 60rpx;
						height: 60rpx;
						margin-top: 8rpx;
						background: url(../../static/images/sss.png);
						background-size: 100% 100%;
					}
					.hader_text1{
						width: 180rpx;
						height: 70rpx;
						font-size: 44rpx;
						font-weight: 500;
						margin-left: 10rpx;
						line-height: 70rpx;
						color: rgba(255, 255, 255, 1);
						text-align: center;
					}
				}
				.hader_text2{
					width: 600rpx;
					height: 200rpx;
					margin: 0 auto;
					margin-top: 30rpx;
					font-size: 26rpx;
					font-weight: 400;
					line-height: 50rpx;
					color: rgba(255, 255, 255, 1);
					text-align: center;
				}
			}
			.list{
				width: 750rpx;
				height: 450rpx;
				border-radius: 20rpx;
				background-color: #fff;
				margin-top: -50rpx;
				.kf_kp_title{
					width: 710rpx;
					height: 60rpx;
					margin: 0 auto;
					padding-top: 30rpx;
					// border: 1px solid black;
					display: flex;
					.block{
						width: 8rpx;
						height: 32rpx;
						margin-top: 9rpx;
						background-color:rgba(255, 87, 51, 1);
						border-radius: 6rpx;
					}
					.title_text{
						margin-left: 10rpx;
						font-size: 32rpx;
						font-weight: 500;
						line-height: 50rpx;
						color: rgba(0, 0, 0, 1);
					}
				}
				// 转让样式
				.main_lists_item{
					width: 720rpx;
					height: 222rpx;
					background-color: #fff;
					margin:  0 auto;
					margin-bottom: 0rpx;
					position: relative;
					display: flex;
					border-radius: 20rpx;
					// border-bottom: 1rpx solid rgb(230, 230, 230);
					border: 1px solid rgb(232, 230, 230);
					.Topping{
						width: 64rpx;
						height: 36rpx;
						font-size: 24rpx;
						border-radius: 8rpx 0rpx 8rpx 0rpx;
						text-align: center;
						line-height: 36rpx;
						color: rgba(255, 255, 255, 1);
						background-color: #FF334E;
						z-index: 2;
						position: absolute;
						left: 16rpx;
						top: 18rpx;
					}
					.item_left{
						width: 236rpx;
						height: 200rpx;
						// border: 1px solid black;
						margin: 9rpx 0 0 16rpx;
						position: relative;
						// background-image: url(https://img.72qq.com/file/202007/24/aed12b08ae.jpg);
						// background-size: 100% 100%;
						.item_left_img{
							width: 236rpx;
							height: 184rpx;
							// background-size: cover;
							margin-top: 8rpx;
							border-radius: 8rpx;
						}
						.visits{
							width: 140rpx;
							height: 40rpx;
							// background-color: pink;
							position: absolute;
							border-radius: 20rpx;
							z-index: 33;
							top: 156rpx;
							left: 4rpx;
							font-size: 24rpx;
							display: flex;
							color: rgba(255, 255, 255, 1);
							font-weight: 300;
							.visits_img{
								margin: 0rpx 2rpx 0 2rpx;
								width: 32rpx;
								height: 38rpx;
								background: url(../../static/images/yanjin.png);
								background-size: 100% 100%;
							}
						}
					}
					.item_right{
						width: 500rpx;
						height: 230rpx;
						margin-left: 10rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						.item_right_one{
							color: #333333;
							width: 430rpx;
							height: 40rpx;
							text-indent:6rpx;
							font-size: 32rpx;
							margin-left: 10rpx;
							margin-top: 16rpx;
							font-weight: 600;
							line-height: 40rpx;
							overflow: hidden;
							// 超出出现省略号
							text-overflow: ellipsis;
							// 换行
							white-space: nowrap;
							.isspan{
								color:#FF334E ;
							}
						}
						.item_right_two_big{
							width: 420rpx;
							height: 40rpx;
							margin:8rpx 0 4rpx 14rpx;
							display: flex;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							.item_right_two{

								// font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #aeadad;
								line-height: 40rpx;
								font-size: 26rpx;

								text-overflow: ellipsis;
								overflow: hidden;
								white-space: nowrap;
							}
							.three_are{
								height: 40rpx;
								margin:  0 0 0 30rpx;
								line-height: 40rpx;
								font-size: 26rpx;
								background: rgba(0,162,255,0.06);
								color: #00A2FF;
								font-weight: 500;
								border-radius: 10rpx;
							}
						}
						
						.item_right_identifying{
							width: 420rpx;
							height: 40rpx;
							margin: 6rpx 0 2rpx 0;
							display: flex;
							// margin-top: 2rpx;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							// border: 1px solid black;
							.item_right_identifying_item{
								// width: 120rpx;
								height: 30rpx;
								font-size: 24rpx;
								font-weight: 400;
								line-height: 30rpx;
								padding: 5rpx 10rpx 5rpx 10rpx;
								// color: rgba(255, 141, 26, 1);
								margin-left: 14rpx;
								text-align: center;
								// border: 1px solid rgba(255, 141, 26, 1);
								border-radius: 12rpx;
								&:nth-child(1) {
									background-color: rgba(249,189,82,0.12);
									color:#F9BD52;
								}
								&:nth-child(2) {
									background-color: rgba(156,126,255,0.12) ;
									color:#9C7EFF ;
								}
								&:nth-child(3) {
									background-color: rgba(63,210,140,0.12);
									color:#3FD28C;
								}
								&:nth-child(4) {
									background-color:rgba(210,63,63,0.12);
									color:#D23F3F;
								}
								&:nth-child(5) {
									background-color:rgba(79,75,255,0.12);
									color:#4F4BFF;
								}
								&:nth-child(6) {
									background-color: rgba(255,0,214,0.12);
									color:#FF00D6 ;
								}
							}
						}				
						.item_right_three{
							width: 420rpx;
							height: 60rpx;
							padding-left: 12rpx;
							display: flex;
							justify-content: space-between;
							.three_money{
								height: 60rpx;
								line-height: 60rpx;
								font-size: 36rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 600;
								color: #F50909 ;
								.span1{
									font-size: 24rpx;
								}
							}

							.three_time{
								width: 145rpx;
								height: 40rpx;
								font-size: 24rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								line-height: 40rpx;
								margin-top: 14rpx;
								color: #999999;
								line-height: 40rpx;
								overflow: hidden;
							// 超出出现省略号
							// text-overflow: ellipsis;
							// 换行
								white-space: nowrap;
							}
						}
						.item_right_five{
							font-size: 12px;
							margin-left: 30rpx;
							color: rgb(163, 169, 175);
						}
					}
				}
				// 求租的样式
				.lists_item{
					width: 720rpx;
					height: 220rpx;
					background-color: #fff;
					margin: 0 auto;
					margin-top: 10rpx;
					margin-bottom: 20rpx;
					position: relative;
					display: flex;
					border-radius: 20rpx;
					border: 1px solid rgb(238, 234, 234);
					.Toppingtwo{
						width: 100rpx;
						height: 30rpx;
						line-height: 30rpx;
						text-align: center;
						font-size: 24rpx;
						background-color: #FF2020;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						color: white;
						z-index: 3;
						position: absolute;
						right: 0;
					}
					.item_left{
						width: 650rpx;
						height: 200rpx;
						// border: 1px solid black;
						margin-left: 10rpx;
						.item_left_one{
							width: 690rpx;
							height: 60rpx;

							// background-color: pink;
							margin: 6rpx 0 0 10rpx;
							line-height: 60rpx;
							font-size: 30rpx;
							font-weight: 700;
							color: rgba(46, 46, 46, 1);
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							.isspan{
								color: rgba(255, 87, 51, 1);
							}
						}
						.item_right_identifying{
							width: 690rpx;
							height: 40rpx;
							margin: 2rpx 0 2rpx 0;
							display: flex;
							// margin-top: 2rpx;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							// border: 1px solid black;
							.item_right_identifying_item{
								// width: 120rpx;
								height: 30rpx;
								font-size: 24rpx;
								font-weight: 400;
								line-height: 30rpx;
								padding: 5rpx 10rpx 5rpx 10rpx;
								// color: rgba(255, 141, 26, 1);
								margin-left: 14rpx;
								text-align: center;
								// border: 1px solid rgba(255, 141, 26, 1);
								border-radius: 12rpx;
								&:nth-child(1) {
									background-color: rgba(249,189,82,0.12);
									color:#F9BD52;
								}
								&:nth-child(2) {
									background-color: rgba(156,126,255,0.12) ;
									color:#9C7EFF ;
								}
								&:nth-child(3) {
									background-color: rgba(63,210,140,0.12);
									color:#3FD28C;
								}
								&:nth-child(4) {
									background-color:rgba(210,63,63,0.12);
									color:#D23F3F;
								}
								&:nth-child(5) {
									background-color:rgba(79,75,255,0.12);
									color:#4F4BFF;
								}
								&:nth-child(6) {
									background-color: rgba(255,0,214,0.12);
									color:#FF00D6 ;
								}
								&:nth-child(7) {
									background-color: rgba(249,189,82,0.12);
									color:#F9BD52;
								}
								&:nth-child(8) {
									background-color: rgba(156,126,255,0.12) ;
									color:#9C7EFF ;
								}
								&:nth-child(9) {
									background-color: rgba(63,210,140,0.12);
									color:#3FD28C;
								}
							}
						}
						.item_left_two{
							width: 690rpx;
							height: 44rpx;
							margin: 6rpx 0 0 10rpx;
							// background-color: pink;
							line-height: 44rpx;
							font-size: 26rpx;
							font-weight: 400;
							color: rgb(88, 86, 86);
						}
						.item_right_three{
							width: 690rpx;
							height: 60rpx;
							padding-left: 12rpx;
							display: flex;
							justify-content: space-between;
							.three_ipone{
								height: 60rpx;
								line-height: 60rpx;
								font-size: 26rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 600;
								color: rgb(88, 86, 86);
							}
							.three_time{
								width: 235rpx;
								height: 40rpx;
								font-size: 24rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								line-height: 40rpx;
								margin-top: 14rpx;
								color: #999999;
								line-height: 40rpx;
								overflow: hidden;
							// 超出出现省略号
							// text-overflow: ellipsis;
							// 换行
								// white-space: nowrap;
							}
						}
						.hrone{
							width: 730rpx;
							height: 1rpx;
							background-color: #e9e9e9;
						}
					}
					.item_right{
						width: 200rpx;
						height: 220rpx;
						margin-left: 10rpx;
						// border: 1px solid black;
						.item_right_center{
							width: 150rpx;
							height: 56rpx;
							margin: 100rpx 0 0 20rpx;
							border-radius: 10rpx;
							background: rgba(255, 87, 51, 1);
							font-size: 28rpx;
							color: #F5F5F5;
							line-height:56rpx ;
							text-align: center;
						}
						.item_right_time{
							width: 240rpx;
							font-size: 24rpx;
							color: rgba(143, 143, 143, 1);
							margin:20rpx 0 0 -40rpx;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}
					}
				}
				.buttom{
					width: 710rpx;
					height: 100rpx;
					margin: 0 auto;
					margin-top: 20rpx;
					display: flex;
					justify-content: space-between;
					font-weight: 400;
					// border: 1px solid black;
					.buttomone{
						width: 300rpx;
						height: 80rpx;
						background-color: rgb(255, 255, 255);
						border: 1px solid rgba(255, 87, 51, 1);
						border-radius: 50rpx;
						text-align: center;
						line-height: 80rpx;
						color: rgba(255, 87, 51, 1);
					}
					.buttomtwo{
						width: 380rpx;
						height: 80rpx;
						background-color: rgba(255, 87, 51, 1);
						border: 1px solid rgba(255, 87, 51, 1);
						border-radius: 50rpx;
						text-align: center;
						line-height: 80rpx;
						color: #fff;
					}
				}
			}
			.oder_infrter{
				width: 750rpx;
				height: 750rpx;
				margin-top: 10rpx;
				border-radius: 20rpx;
				background-color: #fff;
				.kf_kp_title{
					width: 710rpx;
					height: 60rpx;
					margin: 0 auto;
					padding-top: 30rpx;
					// border: 1px solid black;
					display: flex;
					.block{
						width: 8rpx;
						height: 32rpx;
						margin-top: 9rpx;
						background-color:rgba(255, 87, 51, 1);
						border-radius: 6rpx;
					}
					.title_text{
						margin-left: 10rpx;
						font-size: 32rpx;
						font-weight: 500;
						line-height: 50rpx;
						color: rgba(0, 0, 0, 1);
					}
				}
				.center_list{
					width: 680rpx;
					padding: 15rpx 35rpx;
					font-weight: 400;
					display: flex;
					justify-content: space-between;
					.center_left{
						width: 160rpx;
						// border: 1px solid black;
						font-size: 30rpx;
						font-weight: 500;
						line-height:50rpx;
						color: rgba(0, 0, 0, 1);
					}
					.center_right{
						width: 520rpx;
						text-align: right;
						font-size: 30rpx;
						font-weight: 400;
						letter-spacing: 0px;
						line-height: 50rpx;
						color: rgba(128, 128, 128, 1);

					}
				}
				// 一条横线
				.hr{
					width: 700rpx;
					height: 1rpx;
					margin: 0 auto;
					margin-top: 10rpx;
					margin-bottom: 10rpx;
					border-bottom: 1px solid rgb(238, 233, 233);
				}
				.callkf{
					width: 600rpx;
					height: 80rpx;
					margin: 0 auto;
					margin-top: 30rpx;
					border: 1px solid rgba(128, 128, 128, 1);
					border-radius: 50rpx;
					text-align: center;
					line-height: 80rpx;
					color: rgba(128, 128, 128, 1);
					font-weight: 400;
				}
			}
		}
		.fail{
			width: 750rpx;
			margin: 0 auto;
			padding-bottom: 20rpx;
			// border: 1px solid black;	
			font-family: '思源黑体';
			background-color: rgba(229, 229, 229, 1);
			.fail_hader{
				width: 750rpx;
				height: 500rpx;
				background: linear-gradient(180deg, rgba(255, 141, 26, 1) 0%, rgba(255, 87, 51, 1) 100%);
				overflow: hidden;
				.hader_text{
					width: 250rpx;
					height: 80rpx;
					// border: 1px solid black;
					margin:  0 auto;
					margin-top: 80rpx;
					display: flex;
					.hader_icon{
						width: 60rpx;
						height: 60rpx;
						margin-top: 8rpx;
						background: url(../../static/images/xxx.png);
						background-size: 100% 100%;
					}
					.hader_text1{
						width: 180rpx;
						height: 70rpx;
						font-size: 44rpx;
						font-weight: 500;
						margin-left: 10rpx;
						line-height: 70rpx;
						color: rgba(255, 255, 255, 1);
						text-align: center;
					}
				}	
				.hader_image{
					width: 400rpx;
					height: 400rpx;
					margin:0 0 0 180rpx;
					// border: 1px solid black;

				}
			}
			.fail_center{
				width: 750rpx;
				height: 800rpx;
				margin-top: -40rpx;
				border-radius: 20rpx;
				background-color: #fff;
				border: 1px solid #fff;
				.center_title{
					width: 750rpx;
					height: 60rpx;
					margin-top: 60rpx;
					margin-bottom: 30rpx;
					// border: 1px solid black;
					font-size: 40rpx;
					color: rgba(56, 56, 56, 1);
					text-align: center;
					font-weight: 500;
					line-height: 60rpx;
				}
				// 下面的列表
				.center_list{
					width: 680rpx;
					padding: 15rpx 35rpx;
					font-weight: 400;
					display: flex;
					justify-content: space-between;
					.center_left{
						width: 160rpx;
						// border: 1px solid black;
						font-size: 30rpx;
						font-weight: 500;
						line-height:50rpx;
						color: rgba(0, 0, 0, 1);
					}
					.center_right{
						width: 520rpx;
						text-align: right;
						font-size: 30rpx;
						font-weight: 400;
						letter-spacing: 0px;
						line-height: 50rpx;
						color: rgba(128, 128, 128, 1);

					}
				}
				// 重新支付
				.cxzf{
					width: 600rpx;
					height: 90rpx;
					border-radius: 50rpx;
					margin: 0 auto;
					margin-top: 40rpx;
					text-align: center;
					background-color: rgba(255, 87, 51, 1);
					color: #fff;
					font-size: 40rpx;
					font-weight:400 ;
					line-height: 90rpx;
				}
				.wyzf{
					width: 750rpx;
					height: 60rpx;
					font-size: 36rpx;
					font-weight: 400;
					margin-top: 30rpx;
					line-height: 60rpx;
					text-decoration-line: underline;
					color: rgba(255, 87, 51, 1);
					text-align: center;
					vertical-align: top;
				}
			}
			// 联系客服
			.kf_kp{
				width: 750rpx;
				height: 280rpx;
				border-radius: 20rpx;
				background-color: #fff;
				margin-top: 10rpx;
				.kf_kp_title{
					width: 710rpx;
					height: 60rpx;
					margin: 0 auto;
					padding-top: 30rpx;
					// border: 1px solid black;
					display: flex;
					.block{
						width: 10rpx;
						height: 36rpx;
						margin-top: 6rpx;
						background-color:rgba(255, 87, 51, 1);
						border-radius: 6rpx;
					}
					.title_text{
						margin-left: 10rpx;
						font-size: 30rpx;
						font-weight: 500;
						line-height: 50rpx;
						color: rgba(0, 0, 0, 1);
					}
				}
				.kf_kp_list{
					width: 710rpx;
					height: 90rpx;
					margin: 0 auto;
					margin-top: 50rpx;
					// border: 1px solid black;
					display: flex;
					justify-content: space-between;
					.qr{
						width: 230rpx;
						height: 70rpx;
						background-color: rgba(255, 87, 51, 1);
						border: 1px solid rgba(255, 87, 51, 1);
						border-radius: 50rpx;
						font-size: 30rpx;
						line-height: 70rpx;
						color: rgba(255, 255, 255, 1);
						text-align: center;
						font-weight: 400;
					}
					.wx{
						width: 230rpx;
						height: 70rpx;
						background-color: rgb(255, 255, 255);
						border-radius: 50rpx;
						border: 1px solid rgba(166, 166, 166, 1);
						border-radius: 50rpx;
						font-size: 30rpx;
						line-height: 70rpx;
						color: rgrgba(56, 56, 56, 1);
						text-align: center;
						font-weight: 400;
					}
				}
			}
		}
	}
</style>
